<template>
    <div id="carcontrol">
        <div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click="decrease($event)"></div>
        <div class="cart-count"  v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click="addCart($event)"></div>
    </div>
</template>

<script>
import  Vue  from 'vue'
    export default{
        props:{
            food:{
                type:Object
            }
        },
        created(){
            //console.log(this.food)
        },
        methods:{
            addCart(ev){
                if(!ev._constructed){
                    return
                }
                if(!this.food.count){
                    // this.food.count=1
                    Vue.set(this.food,"count",1)
                }else{
                     this.food.count++
                }
            },
            decrease(ev){
               if(!ev._constructed){
                    return
                } 
                if(this.food.count){
                    this.food.count--
                }

            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
#carcontrol
    font-size:0
    .cart-decrease,.cart-add
        font:24px/24px a
        padding:6px
        color:rgb(0,160,220)
        display:inline-block
    .cart-count
        display:inline-block
        vertical-align:top
        width:12px
        padding-top:6px
        font:10px/24px a 
        text-align:center
        color:rgb(147,153,159)

    .cart-add
        display:inline-block
       
        
       
        



</style>